<template>
  <view class="preson-item">
    <view class="preson-item-flex" @click="handleClick">
      <view>
        <TImage
          :src="data?.avatar"
          width="128rpx"
          height="128rpx"
          borderRadius="16rpx"
          error-img-type="person"
        ></TImage>
      </view>
      <view class="info">
        <view class="name-position">
          <view class="name-box">
            <text class="name text-overflow-1">{{ data?.personName }}</text>
            <CustomTag
              v-if="data?.memberLevelName"
              :text="data?.memberLevelName"
              background-color="linear-gradient(90deg, #FDEDC7 0.12%, #F7D9A2 100%)"
              color="#EA5E0E"
              padding="2rpx 12rpx"
            ></CustomTag>
          </view>
          <slot name="rightTop"></slot>
        </view>
        <view class="company-position">
          <text v-if="data?.companyName" class="company" style="color: #333">
            {{ data?.companyName }}
          </text>
          <text class="position">{{ data?.companyPosition }}</text>
        </view>
        <view class="time">
          <text class="time-name"><slot name="timeTitle"></slot></text>
          <text class="time-value"><slot name="timeValue"></slot></text>
        </view>
      </view>
    </view>
    <view v-if="data?.orgName" class="belong-to">
      <text class="text-overflow-1">来源：{{ data?.orgName }}</text>
      <slot name="action"></slot>
    </view>

    <slot name="btns"></slot>
  </view>
</template>
<script setup lang="ts">
  import TImage from '@/components/TImage/index.vue';
  import CustomTag from '@/components/CustomTag/index.vue';
  import { type PropType } from 'vue';
  import type { IActivityRegister } from '@/api/activity/types';

  const props = defineProps({
    data: {
      type: Object as PropType<IActivityRegister>,
    },
  });

  const emits = defineEmits(['click']);

  const handleClick = () => {
    emits('click', props.data);
  };
</script>
<style lang="scss" scoped>
  .preson-item {
    background-color: #ffffff;
    padding: 24rpx;
    border-radius: 16rpx;

    .preson-item-flex {
      display: flex;
      gap: 16rpx;
      .info {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 8rpx;
        .name-position {
          display: flex;
          align-items: flex-start;
          justify-content: space-between;
          gap: 16rpx;
          .name-box {
            display: flex;
            flex-wrap: wrap;
            gap: 16rpx;
            .name {
              color: #333;
              font-size: 32rpx;
              font-weight: 700;
              line-height: 48rpx;
            }
          }
        }
        .company-position {
          display: flex;
          align-items: center;
          flex-wrap: wrap;
          gap: 16rpx;
          color: #969799;
          font-size: 24rpx;
          font-weight: 400;
          line-height: 32rpx;
          .position {
            white-space: nowrap;
          }
        }
        .time {
          display: flex;
          color: #969799;
          font-size: 24rpx;
          font-weight: 400;
          line-height: 32rpx;
        }
      }

      .opration-status {
        display: flex;
        justify-content: center;
      }
    }

    .belong-to {
      color: #969799;
      font-size: 24rpx;
      font-weight: 400;
      line-height: 32rpx;
      margin-top: 24rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
  }
</style>
